<template>
  <div class="demo-container">
    <!-- <h2>模态框 Hook 演示</h2>
    
    <div class="demo-section">
      <h3>基本用法</h3>
      <div class="button-group">
        <a-button type="primary" @click="openTestModal">打开测试模态框</a-button>
        <a-button @click="openExampleModal">打开示例模态框</a-button>
        <a-button @click="openSimpleModal">打开简单模态框</a-button>
      </div>
    </div>

    <div class="demo-section">
      <h3>带参数的模态框</h3>
      <div class="form-group">
        <label>标题：</label>
        <a-input v-model:value="modalParams.title" placeholder="输入模态框标题" />
      </div>
      <div class="form-group">
        <label>描述：</label>
        <a-textarea v-model:value="modalParams.description" placeholder="输入描述信息" />
      </div>
      <div class="form-group">
        <label>用户ID：</label>
        <a-input v-model:value="modalParams.userId" placeholder="输入用户ID" />
      </div>
      <a-button type="primary" @click="openCustomModal">打开自定义模态框</a-button>
    </div>

    <div class="demo-section">
      <h3>操作结果</h3>
      <div v-if="lastResult" class="result-display">
        <h4>上次操作结果：</h4>
        <pre>{{ JSON.stringify(lastResult, null, 2) }}</pre>
        <a-button @click="clearResult" size="small">清除结果</a-button>
      </div>
      <div v-else class="no-result">
        <p>暂无操作结果</p>
      </div>
    </div> -->

    <div class="demo-section">
      <!-- <h3>多模态框测试</h3> -->
      <MultiModalTest />
    </div>

    <!-- <div class="demo-section">
      <h3>使用说明</h3>
      <div class="instructions">
        <p>1. 使用 <code>const { openModal } = useModal()</code> 获取打开模态框的方法</p>
        <p>2. 使用 <code>openModal(component, props)</code> 打开模态框并传递参数</p>
        <p>3. 在模态框组件内部使用 <code>const {modalProps, confirm, cancel, close} = useModalContext()</code> 获取参数和控制方法</p>
        <p>4. 调用 <code>confirm(data)</code>, <code>cancel()</code>, 或 <code>close()</code> 来关闭模态框</p>
        <p>5. <strong>✅ 支持多模态框</strong>：可以同时打开多个模态框，每个都有独立的上下文</p>
      </div>
    </div> -->
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useModal } from './hooks/useModal';
import TestModal from './components/TestModal.vue';
import ExampleModal from './components/ExampleModal.vue';
import NewModal from './components/NewModal.vue';
import MultiModalTest from './components/MultiModalTest.vue';

// 获取打开模态框的方法
const { openModal } = useModal();

// 模态框参数
const modalParams = ref({
  title: '自定义标题',
  description: '这是一个自定义描述的模态框',
  userId: '12345'
});

// 操作结果
const lastResult = ref(null);

// 打开测试模态框
const openTestModal = async () => {
  try {
    const result = await openModal(TestModal, {
      title: '测试模态框',
      message: '这是从父组件传递的消息'
    });
    lastResult.value = {
      type: 'success',
      modal: 'TestModal',
      result
    };
  } catch (error) {
    lastResult.value = {
      type: 'cancel',
      modal: 'TestModal',
      error: error.message
    };
  }
};

// 打开示例模态框
const openExampleModal = async () => {
  try {
    const result = await openModal(ExampleModal, {
      title: '审批模态框',
      description: '请审批此操作',
      userId: 'admin_001'
    });
    lastResult.value = {
      type: 'success',
      modal: 'ExampleModal',
      result
    };
  } catch (error) {
    lastResult.value = {
      type: 'cancel',
      modal: 'ExampleModal',
      error: error.message
    };
  }
};

// 打开简单模态框
const openSimpleModal = async () => {
  try {
    const result = await openModal(NewModal, {
      title: '简单模态框',
      content: '这是一个简单的模态框内容'
    });
    lastResult.value = {
      type: 'success',
      modal: 'NewModal',
      result
    };
  } catch (error) {
    lastResult.value = {
      type: 'cancel',
      modal: 'NewModal',
      error: error.message
    };
  }
};

// 打开自定义模态框
const openCustomModal = async () => {
  try {
    const result = await openModal(ExampleModal, {
      ...modalParams.value,
      timestamp: Date.now()
    });
    lastResult.value = {
      type: 'success',
      modal: 'CustomModal',
      result
    };
  } catch (error) {
    lastResult.value = {
      type: 'cancel',
      modal: 'CustomModal',
      error: error.message
    };
  }
};

// 清除结果
const clearResult = () => {
  lastResult.value = null;
};
</script>

<style scoped>
.demo-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px;
}

.demo-section {
  margin-bottom: 32px;
  padding: 24px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  background: #fafafa;
}

.demo-section h3 {
  margin: 0 0 16px 0;
  color: #333;
}

.button-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
  color: #555;
}

.result-display {
  background: #f5f5f5;
  padding: 16px;
  border-radius: 4px;
}

.result-display pre {
  background: white;
  padding: 12px;
  border-radius: 4px;
  font-size: 12px;
  overflow-x: auto;
  margin: 8px 0;
}

.no-result {
  text-align: center;
  color: #999;
  padding: 20px;
}

.instructions {
  background: white;
  padding: 16px;
  border-radius: 4px;
  border-left: 4px solid #1890ff;
}

.instructions p {
  margin: 8px 0;
  font-size: 14px;
  line-height: 1.6;
}

.instructions code {
  background: #f0f0f0;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
}
</style>